<template>
  <view class="cleaning-management-page">
    <!-- 导航栏 -->
    <u-navbar title="保洁管理" back-icon="arrow-left" />
    
    <!-- 统计卡片区域 -->
    <view class="statistics-section">
      <view class="statistics-card">
        <view class="statistics-item">
          <text class="statistics-value">{{ statistics.totalTasks || 0 }}</text>
          <text class="statistics-label">总任务数</text>
        </view>
        <view class="statistics-item">
          <text class="statistics-value">{{ statistics.completedTasks || 0 }}</text>
          <text class="statistics-label">已完成</text>
        </view>
        <view class="statistics-item">
          <text class="statistics-value">{{ statistics.pendingTasks || 0 }}</text>
          <text class="statistics-label">待处理</text>
        </view>
        <view class="statistics-item">
          <text class="statistics-value">{{ statistics.averageScore || 0 }}</text>
          <text class="statistics-label">平均评分</text>
        </view>
      </view>
    </view>

    <!-- 功能入口区域 -->
    <view class="function-section">
      <view class="section-title">功能管理</view>
      
      <!-- 区域管理 -->
      <service-card
        title="区域管理"
        description="管理保洁区域信息，设置保洁标准"
        icon-name="location"
        theme-color="#3498db"
        @click="goToAreaManagement"
      />
      
      <!-- 任务管理 -->
      <service-card
        title="任务管理"
        description="创建和分配保洁任务"
        icon-name="list"
        theme-color="#2ed573"
        @click="goToTaskManagement"
      />
      
      <!-- 记录管理 -->
      <service-card
        title="记录管理"
        description="查看和验收保洁工作记录"
        icon-name="file-text"
        theme-color="#ff9500"
        @click="goToRecordManagement"
      />
      
      <!-- 统计报表 -->
      <service-card
        title="统计报表"
        description="查看保洁工作统计和报表"
        icon-name="bar-chart"
        theme-color="#3742fa"
        @click="goToStatistics"
      />
    </view>

    <!-- 今日任务区域 -->
    <view class="today-tasks-section">
      <view class="section-title">
        今日任务
        <text class="more-link" @click="goToTaskManagement">更多 ></text>
      </view>
      
      <view v-if="todayTasks.length === 0" class="empty-state">
        <u-empty text="今日暂无任务" icon="list" mode="list" />
      </view>
      
      <view v-else class="task-list">
        <view 
          v-for="task in todayTasks" 
          :key="task.id"
          class="task-card"
          @click="goToTaskDetail(task.id)"
        >
          <view class="task-header">
            <text class="task-title">{{ task.taskName }}</text>
            <u-tag 
              :text="getStatusText(task.status)" 
              :type="getStatusType(task.status)" 
              size="mini"
            />
          </view>
          <view class="task-content">
            <text class="task-area">{{ task.areaName }}</text>
            <text class="task-time">{{ formatTime(task.scheduledTime) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCleaningStatistics, getCleaningTaskByUserId } from '@/api/cleaning'
import ServiceCard from '@/components/ServiceCard.vue'
import { useAuthStore } from '@/store/auth'

// 获取认证store
const authStore = useAuthStore()

// 响应式数据
const statistics = ref({})
const todayTasks = ref([])
const loading = ref(false)

// 页面加载时获取数据
onMounted(() => {
  loadStatistics()
  loadTodayTasks()
})

/**
 * 加载统计信息
 */
const loadStatistics = async () => {
  try {
    loading.value = true
    const response = await getCleaningStatistics()
    if (response.success && response.data) {
      statistics.value = response.data
    }
  } catch (error) {
    console.error('加载统计信息失败:', error)
    uni.showToast({
      title: '加载统计信息失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

/**
 * 加载今日任务
 */
const loadTodayTasks = async () => {
  try {
    // 获取当前登录用户ID
    const currentUserId = authStore.userInfo?.id
    if (!currentUserId) {
      console.warn('未获取到当前用户ID，无法加载今日任务')
      uni.showToast({
        title: '用户未登录',
        icon: 'none'
      })
      return
    }
    
    const today = new Date().toISOString().split('T')[0]
    const response = await getCleaningTaskByUserId(currentUserId, today, today)
    if (response.success && response.data) {
      todayTasks.value = response.data.slice(0, 3) // 只显示前3个任务
    }
  } catch (error) {
    console.error('加载今日任务失败:', error)
    uni.showToast({
      title: '加载今日任务失败',
      icon: 'none'
    })
  }
}

/**
 * 获取状态文本
 */
const getStatusText = (status) => {
  const statusMap = {
    1: '待分配',
    2: '已分配',
    3: '进行中',
    4: '已完成',
    5: '已取消'
  }
  return statusMap[status] || '未知状态'
}

/**
 * 获取状态类型
 */
const getStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'info',
    3: 'primary',
    4: 'success',
    5: 'error'
  }
  return typeMap[status] || 'info'
}

/**
 * 格式化时间
 */
const formatTime = (time) => {
  if (!time) return ''
  return time.substring(0, 5) // 只显示时:分
}

// 页面导航方法
const goToAreaManagement = () => {
  uni.navigateTo({
    url: '/pages/property-work/cleaning-management/area-management'
  })
}

const goToTaskManagement = () => {
  uni.navigateTo({
    url: '/pages/property-work/cleaning-management/task-management'
  })
}

const goToRecordManagement = () => {
  uni.navigateTo({
    url: '/pages/property-work/cleaning-management/record-management'
  })
}

const goToStatistics = () => {
  uni.navigateTo({
    url: '/pages/property-work/cleaning-management/statistics'
  })
}

const goToTaskDetail = (taskId) => {
  uni.navigateTo({
    url: `/pages/property-work/cleaning-management/task-detail?id=${taskId}`
  })
}
</script>

<style lang="scss" scoped>
.cleaning-management-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.statistics-section {
  padding: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .statistics-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16rpx;
    padding: 30rpx;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    
    .statistics-item {
      text-align: center;
      
      .statistics-value {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .statistics-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.function-section {
  padding: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
}

.today-tasks-section {
  padding: 0 20rpx 20rpx;
  
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    
    .more-link {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .empty-state {
    padding: 60rpx 0;
  }
  
  .task-list {
    .task-card {
      background: white;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      }
      
      .task-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;
        
        .task-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }
      
      .task-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .task-area {
          font-size: 24rpx;
          color: #666;
        }
        
        .task-time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
